import React from 'react'
import classnames from 'classnames'
import styled from 'styled-components'

// 函数组件
// react中样式使用

// 样式化组件
const Logo = styled.div`
  .logo {
    padding: 0 20px;
    height: 60px;
    color: #ff0
  }
  .logo h1 {
    font-size: 24px;
    line-height: 60px;
    color: #ff0
  }
`

// :global相当于:deep 使用这个属性可以强硬改变样式
function Order() {
  let formatName = (user) => {
    return user.firstName + ' ' + user.lastName
  }
  let isShow = true
  const user = {
    firstName: 'Ellie',
    lastName: 'Lee'
  }
  // return <div className={`item ${isShow ? 'active' : ''}`}>  样式第一种写法
  // return <div className={['item', (isShow ? 'active' : '')].join(' ')}> 样式第二种写法
  return (
    <>
      <Logo className={`item`}>
        <h1>第一项</h1>
        <div className={classnames('box', 'box-blue')}>
          hello, {formatName(user)}
        </div>
      </Logo>
    </>
  )
}

export default Order
